<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>东单办公系统-员工新增</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
    <script type="text/javascript" src="media/js/jquery.min.js"></script>
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">
    <form class="layui-form" onsubmit="return false" method="get"
          enctype="multipart/form-data">

        <div class="layui-form-item">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-inline">
                <input type="text" name="u_no" lay-verify="name" autocomplete="off"
                       placeholder="请输入工号" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="name" autocomplete="off"
                       placeholder="请输入姓名" class="layui-input">
            </div>
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-inline">
                <select name="did" id="d1">
                    <option value="1">--宣传部--</option>
                    <option value="2">--教学部--</option>
                    <option value="3">--组织部--</option>
                    <option value="4">--招生办--</option>
                    <option value="5">--学生处--</option>
                    <option value="6">--财务处--</option>
                    <option value="7">--人事处--</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="required"
                       placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="required"
                       placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-inline">
                <input type="text" name="qq" lay-verify="required"
                       placeholder="请输入QQ号" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">入职日期</label>
            <div class="layui-input-inline">
                <input type="text" name="entryTime" id="date1" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">照片</label> <img alt="图片预览"
                                                            id="ylimg" src="media/images/qf_logo1.png" width="200px"
                                                            height="200px"/> <label class="layui-btn" for="f1">
            <i class="layui-icon">&#xe67c;</i>上传图片</label>
            <label class="layui-form-label"></label>
            <input class="layui-btn" type="submit" id="submit" value="确认新增">
            <input type="file" name="f1" id="f1" onchange="yl(this,'ylimg')"
                   style="display: none"/>
        </div>
    </form>
</div>


<script src="media/layui/layui.js"></script>
<script type="text/javascript">
    //预览图片,参数说明：第一个参数：要预览的file对象，第二个参数：预览的img标签的id名称
    function yl(obj, id) {
        //FileReader
        if (window.FileReader) {//验证当前的浏览器是否支持图片预览
            var reader = new FileReader();
            var file = obj.files[0];
            var regexImage = /^image\//;//js正则表达式，匹配是否拥有image
            if (regexImage.test(file.type)) {
                //设置读取结束的回调函数
                reader.onload = function (data) {
                    var img = document.getElementById(id);
                    img.src = data.target.result;//将结果数据显示到img标签上

                };
                //开始读取上传的文件内容
                reader.readAsDataURL(file);
            } else {
                alert("亲，看清楚是图片预览");
                return;
            }
        } else {
            alert("亲，浏览器该升级了");

            return;
        }
    }
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var form;
    layui.use(['form', 'layedit', 'laydate','layer'], function () {
        form = layui.form, layer = layui.layer, layedit = layui.layedit,
            laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            content: function (value) {
                layedit.sync(editIndex);
            }
        });
        $("#submit").click(function () {
            $.ajax({
                type: "get",
                url: "staffAdd.do",
                data: $("form").serialize(),
                dataType: "json",
                success: function (data) {
                    if (data.code == 0) {
                        console.log(data)
                        alert(data.msg)
                        window.location.href="staffadd.html";
                    } else {
                        layer.msg ("添加失败")
                    }
                }
            })
        })
    });
    //初始化数据
    // function initData() {
    // 	$.get("departall.do", null, function(arr) {
    // 		for (i = 0; i < arr.length; i++) {
    // 			$("#d1").append(
    // 					"<option value='"+arr[i].id+"'>" + arr[i].name
    // 							+ "</option>");
    // 		}
    // 		form.render("select");
    // 	});
    // 	$.get("staffno.do", null, function(obj) {
    // 		if (obj.msg == 'null') {
    // 			$("#no").val("qf10001");
    // 		} else {
    // 			var str = obj.msg;
    // 			$("#no").val(str.split(str.substr(2,3))[0]+(parseInt(str.substr(2))+1));
    //
    // /* if (str.indexOf('f')) {
    // 				var num = parseInt(str.split('f')[1]) + 1;
    // 				$("#no").val('qf' + num);
    // 			} */
    //
    // 		}
    //
    // 	})
    // }
</script>
<script>


</script>
</body>
</html>